Product
Introducing License Enforcement in Socket
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
@motionone/svelte
Advanced tools
@motionone/svelte is a Svelte-specific package that provides powerful and easy-to-use animation capabilities. It leverages the Motion One library to offer a declarative way to create animations in Svelte applications.
Basic Animations
This feature allows you to create basic animations such as fading in and sliding up elements. The `animate` directive is used to define the animation properties.
<script>
import { animate } from '@motionone/svelte';
</script>
<div use:animate={{ opacity: [0, 1], transform: ['translateY(20px)', 'translateY(0)'] }}>
Fade in and slide up
</div>
Keyframe Animations
This feature allows you to create more complex animations using keyframes. The `animate` directive can take an array of keyframes to define the animation sequence.
<script>
import { animate } from '@motionone/svelte';
</script>
<div use:animate={{ keyframes: [
{ opacity: 0, transform: 'translateY(20px)' },
{ opacity: 1, transform: 'translateY(0)' }
] }}>
Keyframe animation
</div>
Spring Animations
This feature allows you to create spring-based animations, which provide a more natural and bouncy effect. The `spring` directive is used to define the spring properties.
<script>
import { spring } from '@motionone/svelte';
</script>
<div use:spring={{ stiffness: 200, damping: 20 }}>
Spring animation
</div>
svelte-motion is another animation library for Svelte that focuses on providing a declarative way to create animations. It is similar to @motionone/svelte but may have different performance characteristics and API design.
svelte-transitions is a built-in Svelte package that provides basic transition effects. While it is not as feature-rich as @motionone/svelte, it is a good option for simple animations and transitions.
@motionone/svelte
Svelte bindings for Motion One.
Full docs for Motion One available at motion.dev.
FAQs
A tiny, performant animation library for Svelte
The npm package @motionone/svelte receives a total of 219,112 weekly downloads. As such, @motionone/svelte popularity was classified as popular.
We found that @motionone/svelte demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 2 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Ensure open-source compliance with Socket’s License Enforcement Beta. Set up your License Policy and secure your software!
Product
We're launching a new set of license analysis and compliance features for analyzing, managing, and complying with licenses across a range of supported languages and ecosystems.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.